<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
html方式创建数据表格-easyui组件发出的请求全部都是ajax请求
<table class="easyui-datagrid" data-options="url:'../data/user.json'">
	<thead>
		<tr>
			<th data-options="field:'id'">编号</th>
			<th data-options="field:'name'">姓名</th>
			<th data-options="field:'age'">年龄</th>
		</tr>
	</thead>
</table>
<hr>
js方式:
<table id="dg"></table>
<script type="text/javascript">
	$('#dg').datagrid({    
	    url:'../data/user.json',    //数据来源
	    columns:[[    				 //展示数据
	        {field:'id',title:'编号',width:100},   //列属性 
	        {field:'name',title:'姓名',width:100},    
	        {field:'age',title:'年龄',width:100,align:'right'}    
	    ]],
	    pagination:true //加入分页栏        page（当前页） rows(页大小)
	  	//加入分页组件后，响应数据格式要求： json对象（total总记录，rows当前页记录）
	  	/*
		 {
			"total":200,
			"rows":[{},{},{}]
		 }
		*/
	  	,toolbar: [{   //加入工具栏
			  		iconCls: 'icon-edit',
			  		text:'修改',
					handler: function(){
						alert('edit')
					}
				},{
					iconCls: 'icon-help',
					text:'帮助',
					handler: function(){
						alert('help')
					}
				}]	
	,striped:true
	,rownumbers:true
	,singleSelect:true
	,pageNumber:2
	,pageSize:6
	,pageList:[5,6,7]
	


	    
	}); 
</script>




</body>
</html>